<template>
    <div class="regnew">
        <!-- 顶部 -->
        <van-nav-bar title="注册" left-arrow class="header" @click-left="goBack"></van-nav-bar>


        <!-- 提示信息 -->
        <van-image>
            <!-- 输入框 -->
            <van-form>
                <van-field v-model="password" name="密码" :type="type" @input="change" placeholder="请输入密码"
                    :rules="[{ required: true}]" />
                <!-- 隐藏按钮 -->
                <van-icon :name="msg" @click="hidden" />
            </van-form>
            <template class="title">密码强度校验，最少6位，包括至少1个大写字母，1个小写字母，1个数字</template>
        </van-image>

        <!-- 下一步 -->
        <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit" class="reg" :disabled="flag" @click="gologin(password)">完成
            </van-button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            sms: '',
            flag: true,
            msg: 'closed-eye',
            password: '',
            type: 'password',
            phone:this.$route.query.phone
        }
    },
    methods: {
        
        goBack() {
            this.$router.back()
        },
        hidden() {
            if (this.msg == 'closed-eye') {
                this.msg = 'browsing-history-o'
                this.type = 'text'
            } else {
                this.msg = 'closed-eye'
                this.type = 'password'
            }
        },
        // 注册
        gologin(password) {
            console.log("this.password",password);
            this.$service({
                method: 'post',
                url: 'user/dofinishregister',
                data: {
                    tel: this.phone,
                    password: password
                }
            })
                .then(res => {
                    if (res.data.code == 200) {
                        this.$toast('注册成功')
                      this.$router.push('/login')
                    }
                })
            
        },
        change() {
            if (this.password.toString().length >= 6) {
                this.flag = false
            }
        }

    }

}
</script>

<style scoped>
.regnew {
    padding: .625rem;
}

.van-image {
    margin: 0 auto;
    width: 100%;
    height: 12.25rem;
    text-align: center;
    margin-bottom: 2.625rem;
}

.button {
    border: 0;
    background-color: pink;
    color: red;
}

.reg {
    border: 0;
    background: linear-gradient(to right, rgb(255, 96, 52), rgb(238, 10, 36));
}

#app>div>div.van-image>form>div {
    position: relative;
    margin: 1.25rem 0;
}

#app>div>div.van-image>form>i {
    position: absolute;
    top: 14.375rem;
    right: 1.25rem;
}

.title {
    font-size: 12px;
}
</style>